<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :model="postForm" :label-position="'right'" size="mini" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">

          <el-col :span="8">
            <el-form-item label="权限名称:">
              <el-input v-model="postForm.name" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="权限key:">
              <el-input v-model="postForm.menuKey" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" size="mini" @click="query()">查询</el-button>
              <el-button type="warning" size="mini" @click="addInfo()">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <tree-table :height="tableHeight" :data="tableData" :columns="columns" border>
        <template slot="type" slot-scope="{scope}">
          <el-tag size="mini" v-if="scope.row.type==='MENU'">菜单</el-tag>
          <el-tag size="mini" v-if="scope.row.type==='RESTRICTED'">按钮</el-tag>
        </template>
        <template slot="operation" slot-scope="{scope}">
          <el-button type="success" size="mini" @click="editInfo(scope.$index,scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="delInfo(scope.row)">删除</el-button>
        </template>
      </tree-table>

      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,prev,pager,next,jumper,sizes"
          :total="total"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-sizes="[15, 30, 45, 60, 75,90,105,120,135,150]"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog :title="title" :visible.sync="centerDialogVisible" center>
      <el-form ref="info" :rules="rules" :model="info" label-position="right" label-width="100px">
        <el-form-item label="权限名称:" prop="name">
          <el-input v-model="info.name" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="权限key:" prop="menuKey">
          <el-input v-model="info.menuKey" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="上级权限:">
          <el-select v-model="info.pId" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="类型:" prop="type">
          <el-select v-model="info.type" filterable placeholder="请选择">
            <el-option label="菜单" value="MENU"/>
            <el-option label="按钮" value="RESTRICTED"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="settingVisible" center>
      <el-form ref="info" :rules="rules" :model="settingInfo" label-position="right" label-width="140px">
        <el-form-item label="公告费申请次数:" prop="advertisingFeeNum">
          <el-input v-model="settingInfo.advertisingFeeNum" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="诉讼费申请次数:" prop="costsNum">
          <el-input v-model="settingInfo.costsNum" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="settingVisible = false">取 消</el-button>
        <el-button type="primary" @click="getSettingEditInfo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TreeTable from '@/components/TreeTable'
  import {
    page,
    superiorList,
    getInfo,
    delInfo,
    addOrEdit,
  } from '@/api/system/privilege.js'

  export default {
    components: { TreeTable },
    data() {
      return {
        tableHeight: window.innerHeight - 180,
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 15,
        // 页码
        currentPage: 1,
        postForm: {
          name: null,
          menuKey: null
        },
        info: {},
        tableData: [],
        name: null,
        menuKey: null,
        options: [],
        editIndex: 0,
        centerDialogVisible: false,
        settingInfo: {},
        settingVisible: false,
        title: '新增权限',
        rules: {
          type: [{ required: true, message: '请选择类型', trigger: 'change' }],
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          menuKey: [{ required: true, message: '请输入key', trigger: 'blur' }],
          advertisingFeeNum: [{ required: true, message: '请输入内容', trigger: 'blur' }],
          costsNum: [{ required: true, message: '请输入内容', trigger: 'blur' }]
        },
        columns: [
          {
            label: '权限名称',
            key: 'name',
            expand: true
          },
          {
            label: '权限key',
            key: 'menuKey'
          },
          {
            label: '种类',
            key: 'type'
          },
          {
            label: '操作',
            key: 'operation'
          }
        ]
      }
    },
    created() {
      this.getData()
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
      },
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 新增
      addInfo() {
        this.title = '新增权限'
        this.getPInfo()
        this.centerDialogVisible = true
        this.info = {}
      },
      /**
       * 编辑
       * @param row
       */
      editInfo(index, row) {
        this.editIndex = index
        this.title = '编辑'
        this.getPInfo()
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data
        })
      },
      delInfo(row) {
        delInfo(row.id).then(response => {
          this.getData()
        })
      },
      // 获取上级权限
      getPInfo() {
        superiorList().then(response => {
          this.options = response.data
        })
      },
      // 查询条件
      query() {
        this.name = this.postForm.name
        this.menuKey = this.postForm.menuKey
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.name, this.menuKey).then(response => {
          this.total = parseInt(response.count)
          this.tableData = response.data
        })
      },

      addOrEdit: function() {
        this.$refs[ 'info' ].validate((valid) => {
          if (valid) {
            addOrEdit(this.info.id, this.info.name, this.info.menuKey, this.info.pId, this.info.type).then(response => {
              this.centerDialogVisible = false
              if (this.info.id == null) {
                // 新增
                this.tableData.unshift(response.data)
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                // 编辑
                this.tableData.splice(this.editIndex, 1, response.data)
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
        })
      }
    }
  }
</script>

